<template>
  <div class="profile-container">
    <!-- 动态背景 -->
    <canvas ref="backgroundCanvas" class="background-canvas"></canvas>
    <div class="background-overlay"></div>
    
    <!-- 页面头部 -->
    <div class="profile-header">
      <div class="header-content">
        <div class="header-left">
          <button @click="$router.push('/lobby')" class="back-btn">
            <i class="fas fa-arrow-left"></i>
            返回大厅
          </button>
          <h1 class="page-title">
            <i class="fas fa-user-circle"></i>
            个人中心
          </h1>
        </div>
        <div>
          <button @click="logout" class="cancel-btn" style="margin-left:20px;">
            <i class="fas fa-sign-out-alt"></i> 退出登录
          </button>
        </div>
      </div>
    </div>

    <div class="profile-content">
      <!-- 用户基本信息卡片 -->
      <div class="profile-card">
        <div class="card-header">
          <h2>基本信息</h2>
        </div>
        <div class="card-body">
          <div class="profile-grid">
            <div class="avatar-section">
              <div class="avatar-container">
                <img :src="getAvatarUrl(userProfile.avatar)" :alt="userProfile.username" class="avatar"
                  @click="openAvatarSelector" style="cursor:pointer;" title="点击更换头像">
              </div>
              <div class="user-name">
                <h3>{{ userProfile.username }}</h3>
                <div class="user-status">
                  <span class="status-dot" :class="userProfile.status === '在线' ? 'online' : 'offline'"></span>
                  {{ userProfile.status }}
                </div>
              </div>
            </div>

            <div class="stats-section">
              <div class="stats-grid">
                <div class="stat-item">
                  <div class="stat-icon">
                    <i class="fas fa-star"></i>
                  </div>
                  <div class="stat-content">
                    <div class="stat-value">{{ userProfile.totalScore || 0 }}</div>
                    <div class="stat-label">游戏积分</div>
                  </div>
                </div>

                <div class="stat-item">
                  <div class="stat-icon">
                    <i class="fas fa-gamepad"></i>
                  </div>
                  <div class="stat-content">
                    <div class="stat-value">{{ userProfile.totalGames || 0 }}</div>
                    <div class="stat-label">游戏场次</div>
                  </div>
                </div>

                <div class="stat-item">
                  <div class="stat-icon">
                    <i class="fas fa-clock"></i>
                  </div>
                  <div class="stat-content">
                    <div class="stat-value">{{ formatPlayTime(userProfile.totalPlayTimeSeconds || 0) }}</div>
                    <div class="stat-label">游戏时长</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 安全设置卡片 -->
      <div class="security-card">
        <div class="card-header">
          <h2><i class="fas fa-shield-alt"></i> 安全设置</h2>
        </div>
        <div class="card-body">
          <div v-if="!showPasswordForm" class="security-section">
            <div class="security-icon">
              <i class="fas fa-lock"></i>
            </div>
            <div class="security-info">
              <h3>账户安全</h3>
              <p>定期修改密码可以保护您的账户安全</p>
            </div>
            <button @click="showPasswordForm = true" class="change-password-btn">
              <i class="fas fa-key"></i>
              修改密码
            </button>
          </div>
          <div v-else class="password-form">
            <div class="form-header">
              <h3><i class="fas fa-key"></i> 修改密码</h3>
              <p>请填写以下信息来更新您的密码</p>
            </div>
            <div class="form-item">
              <label><i class="fas fa-lock"></i> 当前密码：</label>
              <input v-model="passwordForm.oldPassword" type="password" class="form-input" placeholder="请输入当前密码">
            </div>
            <div class="form-item">
              <label><i class="fas fa-key"></i> 新密码：</label>
              <input v-model="passwordForm.newPassword" type="password" class="form-input" placeholder="请输入新密码（至少6位）">
            </div>
            <div class="form-item">
              <label><i class="fas fa-check-circle"></i> 确认新密码：</label>
              <input v-model="passwordForm.confirmPassword" type="password" class="form-input" placeholder="请再次输入新密码">
            </div>
            <div class="form-actions">
              <button @click="changePassword" :disabled="!isPasswordFormValid || isChangingPassword" class="submit-btn">
                {{ isChangingPassword ? '修改中...' : '确认修改' }}
              </button>
              <button @click="cancelPasswordChange" class="cancel-btn">
                取消
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 应用设置卡片 -->
      <div class="settings-card">
        <div class="card-header">
          <h2><i class="fas fa-cog"></i> 应用设置</h2>
        </div>
        <div class="card-body">
          <div class="settings-grid">
            <!-- 主题设置 -->
            <div class="setting-card">
              <div class="setting-icon">
                <i class="fas fa-palette"></i>
              </div>
              <div class="setting-content">
                <h3>主题设置</h3>
                <select v-model="appSettings.theme" @change="saveSettings" class="setting-select">
             
                  <option value="light">浅色主题</option>
                  <option value="dark">深色主题</option>
                </select>
              </div>
            </div>

            <!-- 音效设置 -->
            <div class="setting-card">
              <div class="setting-icon">
                <i class="fas fa-volume-up"></i>
              </div>
              <div class="setting-content">
                <h3>音效设置</h3>
                <div class="toggle-container">
                  <label class="toggle-switch">
                    <input type="checkbox" v-model="appSettings.soundEnabled" @change="saveSettings">
                    <span class="toggle-slider"></span>
                  </label>
                  <span class="toggle-label">{{ appSettings.soundEnabled ? '开启' : '关闭' }}</span>
                </div>
              </div>
            </div>

            <!-- 音量设置 -->
            <div class="setting-card">
              <div class="setting-icon">
                <i class="fas fa-volume-down"></i>
              </div>
              <div class="setting-content">
                <h3>音量大小</h3>
                <input type="range" min="0" max="100" v-model="appSettings.volume" @input="saveSettings"
                  class="volume-slider" :disabled="!appSettings.soundEnabled">
                <span class="volume-value">{{ appSettings.volume }}%</span>
              </div>
            </div>

            <!-- 自动保存设置 -->
            <div class="setting-card">
              <div class="setting-icon">
                <i class="fas fa-save"></i>
              </div>
              <div class="setting-content">
                <h3>自动保存</h3>
                <div class="toggle-container">
                  <label class="toggle-switch">
                    <input type="checkbox" v-model="appSettings.autoSave" @change="saveSettings">
                    <span class="toggle-slider"></span>
                  </label>
                  <span class="toggle-label">{{ appSettings.autoSave ? '开启' : '关闭' }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="isLoading" class="loading-overlay">
      <div class="loading-spinner">
        <i class="fas fa-spinner fa-spin"></i>
        <p>加载中...</p>
      </div>
    </div>

    <!-- 退出登录确认弹窗 -->
    <div v-if="showLogoutModal" class="logout-modal-overlay" @click="cancelLogout">
      <div class="logout-modal" @click.stop>
        <div class="logout-modal-header">
          <div class="logout-icon">
            <i class="fas fa-sign-out-alt"></i>
          </div>
          <h3>确认退出</h3>
        </div>
        <div class="logout-modal-body">
          <p>确定要退出当前账号吗？</p>
          <p class="logout-hint">退出后需要重新登录才能使用所有功能</p>
        </div>
        <div class="logout-modal-actions">
          <button @click="confirmLogout" class="confirm-logout-btn">
            <i class="fas fa-check"></i>
            确认退出
          </button>
          <button @click="cancelLogout" class="cancel-logout-btn">
            <i class="fas fa-times"></i>
            取消
          </button>
        </div>
      </div>
    </div>

    <!-- 头像选择器模态框 -->
    <Transition name="modal-fade">
      <div v-if="showAvatarSelector" class="avatar-selector-overlay" @click="closeAvatarSelector">
        <div class="avatar-selector" @click.stop>
          <div class="selector-header">
            <h3>选择头像</h3>
            <button @click="closeAvatarSelector" class="close-selector-btn">
              <i class="fas fa-times"></i>
            </button>
          </div>
          <div class="avatar-grid">
            <div 
              v-for="avatar in avatarOptions" 
              :key="avatar.id"
              class="avatar-option"
              :class="{ 'selected': selectedAvatarId === avatar.id }"
              @click="selectAvatar(avatar.id)"
            >
              <div class="avatar-frame">
                <img :src="avatar.url" alt="头像" class="avatar-image"/>
                <div class="avatar-overlay">
                  <svg class="check-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 12L11 14L15 10M21 12C21 16.97 16.97 21 12 21C7.03 21 3 16.97 3 12C3 7.03 7.03 3 12 3C16.97 3 21 7.03 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
              </div>
            </div>
          </div>
          <div class="selector-actions">
            <button @click="confirmAvatarChange" class="confirm-btn" :disabled="!selectedAvatarId">
              确认修改
            </button>
            <button @click="closeAvatarSelector" class="cancel-btn">
              取消
            </button>
          </div>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

// 退出登录相关状态
const showLogoutModal = ref(false)

// 退出登录方法
const logout = () => {
  showLogoutModal.value = true
}

const confirmLogout = () => {
  // 清空 Pinia 用户信息
  userStore.setUserInfo({})
  // 清空所有本地存储（如有其他用户相关信息）
  localStorage.clear()
  sessionStorage.clear()
  showNotification('已退出登录', 'success')
  router.push('/')
}

const cancelLogout = () => {
  showLogoutModal.value = false
}

import { ref, reactive, onMounted, computed, watch, onUnmounted } from 'vue'
import { userAPI } from '@/api/user.js'
import { useUserStore } from '@/stores/user.js'

const backgroundCanvas = ref(null)
let animationFrameId = null

const userStore = useUserStore()

const showNotification = (message, type = 'info') => {
  // 可以在这里实现更好的通知组件，暂时使用console.log
  console.log(`${type}: ${message}`)
}

// 页面状态
const isLoading = ref(false)
const showPasswordForm = ref(false)
const isChangingPassword = ref(false)
const showAvatarSelector = ref(false)
const selectedAvatarId = ref('')

// 头像选项 - 与注册页面保持一致
const avatarOptions = ref([
  { id: '1', url: '/images/avatar1.png' },
  { id: '2', url: '/images/avatar2.png' },
  { id: '3', url: '/images/avatar3.png' },
  { id: '4', url: '/images/avatar4.png' },
  { id: '5', url: '/images/avatar5.png' },
  { id: '6', url: '/images/avatar6.png' }
])

// 密码修改表单
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 应用设置
const appSettings = reactive({
  theme: localStorage.getItem('app-theme') || 'auto',
  soundEnabled: localStorage.getItem('app-sound') !== 'false',
  volume: parseInt(localStorage.getItem('app-volume')) || 50,
  autoSave: localStorage.getItem('app-autosave') !== 'false'
})

// 计算属性
const userProfile = computed(() => userStore.userInfo)

const isPasswordFormValid = computed(() => {
  return passwordForm.oldPassword &&
    passwordForm.newPassword &&
    passwordForm.confirmPassword &&
    passwordForm.newPassword === passwordForm.confirmPassword &&
    passwordForm.newPassword.length >= 6
})

// 获取头像URL
const getAvatarUrl = (avatarId) => {
  const avatar = avatarOptions.value.find(opt => opt.id === avatarId)
  return avatar ? avatar.url : '/default-avatar.svg'
}

// 打开头像选择器
const openAvatarSelector = () => {
  selectedAvatarId.value = userProfile.value.avatar || ''
  showAvatarSelector.value = true
}

// 关闭头像选择器
const closeAvatarSelector = () => {
  showAvatarSelector.value = false
  selectedAvatarId.value = ''
}

// 选择头像
const selectAvatar = (avatarId) => {
  selectedAvatarId.value = avatarId
}

// 确认头像修改
const confirmAvatarChange = async () => {
  if (!selectedAvatarId.value) {
    showNotification('请选择一个头像', 'warning')
    return
  }

  try {
    isLoading.value = true
    const userId = userStore.userInfo?.id
    if (!userId) {
      throw new Error('未获取到用户ID')
    }

    // 调用后端接口更新头像
    const response = await userAPI.updateAvatar(userId, selectedAvatarId.value)
    
    if (response && response.success !== false) {
      // 更新本地用户信息
      userStore.setUserInfo({
        ...userStore.userInfo,
        avatar: selectedAvatarId.value
      })
      
      showNotification('头像修改成功', 'success')
      closeAvatarSelector()
    } else {
      throw new Error(response?.message || '头像修改失败')
    }
  } catch (error) {
    console.error('头像修改失败:', error)
    showNotification(error.message || '头像修改失败，请稍后重试', 'error')
  } finally {
    isLoading.value = false
  }
}

// 方法
const fetchProfile = async () => {
  try {
    isLoading.value = true
    const id = userStore.userInfo && userStore.userInfo.id
    if (!id) throw new Error('未获取到用户ID')
    // 用 getUserOverview 获取用户信息
    const res = await userAPI.getUserOverview(id)
    if (res && res.data) {
      userStore.setUserInfo(res.data)
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    showNotification('获取用户信息失败', 'error')
  } finally {
    isLoading.value = false
  }
}

const changePassword = async () => {
  if (!isPasswordFormValid.value) {
    showNotification('请检查密码输入', 'error')
    return
  }

  try {
    isChangingPassword.value = true
    const id = userStore.userInfo && userStore.userInfo.id
    if (!id) {
      throw new Error('未获取到用户ID')
    }
    await userAPI.changePassword(
      id,
      passwordForm.oldPassword,
      passwordForm.newPassword,
      passwordForm.confirmPassword
    )
    cancelPasswordChange()
    showNotification('密码修改成功', 'success')
  } catch (error) {
    console.error('修改密码失败:', error)
    showNotification(error.message || '修改密码失败', 'error')
  } finally {
    isChangingPassword.value = false
  }
}

const cancelPasswordChange = () => {
  showPasswordForm.value = false
  Object.assign(passwordForm, {
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
  })
}

const formatPlayTime = (seconds) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  return `${hours}小时${minutes}分钟`
}

// 保存应用设置
const saveSettings = () => {
  localStorage.setItem('app-theme', appSettings.theme)
  localStorage.setItem('app-sound', appSettings.soundEnabled.toString())
  localStorage.setItem('app-volume', appSettings.volume.toString())
  localStorage.setItem('app-autosave', appSettings.autoSave.toString())
  showNotification('设置已保存', 'success')
}

// 初始化动态背景
const initDynamicBackground = () => {
  if (!backgroundCanvas.value) return
  
  const canvas = backgroundCanvas.value
  const ctx = canvas.getContext('2d')
  
  // 设置画布大小
  const resizeCanvas = () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  }
  resizeCanvas()
  window.addEventListener('resize', resizeCanvas)
  
  // 几何粒子数组
  const particles = []
  const gears = []
  const circuits = []
  
  // 创建粒子系统
  for (let i = 0; i < 80; i++) {
    particles.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      size: Math.random() * 3 + 1,
      speedX: (Math.random() - 0.5) * 0.5,
      speedY: (Math.random() - 0.5) * 0.5,
      opacity: Math.random() * 0.8 + 0.2,
      color: ['#4a6cf7', '#0ea5e9', '#8b5cf6', '#06b6d4'][Math.floor(Math.random() * 4)]
    })
  }
  
  // 创建齿轮系统
  for (let i = 0; i < 6; i++) {
    gears.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      size: Math.random() * 60 + 40,
      rotation: 0,
      speed: (Math.random() - 0.5) * 0.01,
      opacity: Math.random() * 0.3 + 0.1,
      teeth: Math.floor(Math.random() * 4) + 8
    })
  }
  
  // 创建电路线条
  for (let i = 0; i < 12; i++) {
    circuits.push({
      startX: Math.random() * canvas.width,
      startY: Math.random() * canvas.height,
      endX: Math.random() * canvas.width,
      endY: Math.random() * canvas.height,
      progress: 0,
      speed: Math.random() * 0.002 + 0.001,
      opacity: Math.random() * 0.6 + 0.2,
      color: ['#4a6cf7', '#0ea5e9', '#8b5cf6'][Math.floor(Math.random() * 3)]
    })
  }
  
  // 绘制齿轮
  const drawGear = (gear) => {
    ctx.save()
    ctx.translate(gear.x, gear.y)
    ctx.rotate(gear.rotation)
    ctx.globalAlpha = gear.opacity
    
    // 齿轮颜色
    ctx.strokeStyle = '#4a6cf7'
    ctx.fillStyle = 'rgba(74, 108, 247, 0.1)'
    ctx.lineWidth = 2
    
    // 绘制齿轮外圈
    const outerRadius = gear.size / 2
    const innerRadius = outerRadius * 0.6
    const toothHeight = outerRadius * 0.2
    
    ctx.beginPath()
    for (let i = 0; i < gear.teeth; i++) {
      const angle = (i * 2 * Math.PI) / gear.teeth
      const nextAngle = ((i + 1) * 2 * Math.PI) / gear.teeth
      
      // 齿的顶端
      const x1 = Math.cos(angle) * (outerRadius + toothHeight)
      const y1 = Math.sin(angle) * (outerRadius + toothHeight)
      const x2 = Math.cos(nextAngle) * (outerRadius + toothHeight)
      const y2 = Math.sin(nextAngle) * (outerRadius + toothHeight)
      
      // 齿的根部
      const x3 = Math.cos(nextAngle) * outerRadius
      const y3 = Math.sin(nextAngle) * outerRadius
      const x4 = Math.cos(angle) * outerRadius
      const y4 = Math.sin(angle) * outerRadius
      
      if (i === 0) ctx.moveTo(x1, y1)
      ctx.lineTo(x2, y2)
      ctx.lineTo(x3, y3)
      ctx.lineTo(x4, y4)
      ctx.lineTo(x1, y1)
    }
    ctx.fill()
    ctx.stroke()
    
    // 绘制内圈
    ctx.beginPath()
    ctx.arc(0, 0, innerRadius, 0, Math.PI * 2)
    ctx.fillStyle = 'rgba(74, 108, 247, 0.2)'
    ctx.fill()
    ctx.stroke()
    
    // 绘制中心点
    ctx.beginPath()
    ctx.arc(0, 0, innerRadius * 0.3, 0, Math.PI * 2)
    ctx.fillStyle = '#4a6cf7'
    ctx.fill()
    
    ctx.restore()
  }
  
  // 绘制电路线条
  const drawCircuit = (circuit) => {
    const currentX = circuit.startX + (circuit.endX - circuit.startX) * circuit.progress
    const currentY = circuit.startY + (circuit.endY - circuit.startY) * circuit.progress
    
    ctx.globalAlpha = circuit.opacity
    ctx.strokeStyle = circuit.color
    ctx.lineWidth = 2
    
    // 绘制路径
    ctx.beginPath()
    ctx.moveTo(circuit.startX, circuit.startY)
    ctx.lineTo(currentX, currentY)
    ctx.stroke()
    
    // 绘制流动的点
    ctx.fillStyle = circuit.color
    ctx.beginPath()
    ctx.arc(currentX, currentY, 3, 0, Math.PI * 2)
    ctx.fill()
    
    // 绘制发光效果
    ctx.shadowColor = circuit.color
    ctx.shadowBlur = 10
    ctx.beginPath()
    ctx.arc(currentX, currentY, 2, 0, Math.PI * 2)
    ctx.fill()
    ctx.shadowBlur = 0
  }
  
  // 绘制粒子
  const drawParticle = (particle) => {
    ctx.globalAlpha = particle.opacity
    ctx.fillStyle = particle.color
    
    // 绘制六边形粒子
    ctx.beginPath()
    for (let i = 0; i < 6; i++) {
      const angle = (i * Math.PI) / 3
      const x = particle.x + Math.cos(angle) * particle.size
      const y = particle.y + Math.sin(angle) * particle.size
      if (i === 0) ctx.moveTo(x, y)
      else ctx.lineTo(x, y)
    }
    ctx.closePath()
    ctx.fill()
    
    // 添加发光效果
    ctx.shadowColor = particle.color
    ctx.shadowBlur = 8
    ctx.fill()
    ctx.shadowBlur = 0
  }
  
  // 动画循环
  const animate = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    
    // 更新和绘制粒子
    particles.forEach(particle => {
      particle.x += particle.speedX
      particle.y += particle.speedY
      
      if (particle.x < 0) particle.x = canvas.width
      if (particle.x > canvas.width) particle.x = 0
      if (particle.y < 0) particle.y = canvas.height
      if (particle.y > canvas.height) particle.y = 0
      
      drawParticle(particle)
    })
    
    // 更新和绘制齿轮
    gears.forEach(gear => {
      gear.rotation += gear.speed
      drawGear(gear)
    })
    
    // 更新和绘制电路
    circuits.forEach(circuit => {
      circuit.progress += circuit.speed
      if (circuit.progress > 1) {
        circuit.progress = 0
        // 重新随机化路径
        circuit.startX = Math.random() * canvas.width
        circuit.startY = Math.random() * canvas.height
        circuit.endX = Math.random() * canvas.width
        circuit.endY = Math.random() * canvas.height
      }
      drawCircuit(circuit)
    })
    
    animationFrameId = requestAnimationFrame(animate)
  }
  
  animate()
}

// 应用主题到页面
const applyTheme = (theme) => {
  const root = document.documentElement;
  if (theme === 'dark') {
    root.classList.add('dark-theme');
    root.classList.remove('light-theme');
  } else if (theme === 'light') {
    root.classList.add('light-theme');
    root.classList.remove('dark-theme');
  } else {
    // 紫色主题（auto）
    root.classList.remove('dark-theme');
    root.classList.remove('light-theme');
  }
};

// 监听主题变化
watch(() => appSettings.theme, (newTheme) => {
  applyTheme(newTheme);
  saveSettings();
});

// 监听音效开关变化
watch(() => appSettings.soundEnabled, (enabled) => {
  // 这里可以添加音效开关逻辑
  saveSettings();
});

// 监听音量变化
watch(() => appSettings.volume, (volume) => {
  // 这里可以添加音量调整逻辑
  saveSettings();
});

// 监听自动保存变化
watch(() => appSettings.autoSave, (autoSave) => {
  saveSettings();
});

// 生命周期
onMounted(async () => {
  const id = userStore.userInfo && userStore.userInfo.id
  if (id) {
    await fetchProfile()
  } else {
    // 没有userId时加载本地测试数据
    userStore.setUserInfo({
      id: 1,
      username: '测试用户',
      avatar: '1', // 使用头像ID而不是URL
      status: '在线',
      totalScore: 1420,
      totalGames: 156,
      totalPlayTimeSeconds: 3600
    })
  }

  // 初始化时应用主题
  applyTheme(appSettings.theme);

  // 监听系统主题变化
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    if (appSettings.theme === 'auto') {
      applyTheme('auto');
    }
  });
  
  // 初始化动态背景
  initDynamicBackground()
})

onUnmounted(() => {
  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId)
  }
})
</script>

<style scoped>
.profile-container {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f1419 100%);
  padding: 20px;
  overflow: hidden;
}

/* 动态背景 */
.background-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.background-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(74, 108, 247, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.05) 0%, transparent 70%);
  z-index: 2;
  pointer-events: none;
}

.profile-header {
  position: relative;
  z-index: 10;
  margin-bottom: 30px;
}

.header-content {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.back-btn {
  background: rgba(74, 108, 247, 0.2);
  color: white;
  border: 2px solid rgba(74, 108, 247, 0.4);
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.back-btn:hover {
  background: rgba(74, 108, 247, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(74, 108, 247, 0.3);
}

.page-title {
  color: white;
  font-size: 2rem;
  font-weight: bold;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 15px;
}

.profile-content {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* 卡片通用样式 */
.profile-card,
.security-card,
.settings-card {
  background: rgba(30, 30, 50, 0.8);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(74, 108, 247, 0.2);
  border-radius: 15px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(74, 108, 247, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.profile-card:hover,
.security-card:hover,
.settings-card:hover {
  transform: translateY(-5px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(74, 108, 247, 0.2);
  border-color: rgba(74, 108, 247, 0.4);
}

.card-header {
  background: linear-gradient(135deg, #4a6cf7 0%, #8b5cf6 100%);
  color: white;
  padding: 15px 25px;
}

.card-header h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-body {
  padding: 25px;
}

/* 基本信息卡片 */
.profile-card .card-body {
  background: rgba(30, 30, 50, 0.9);
  color: #e0e0e0;
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 30px;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.avatar-container {
  position: relative;
  width: 120px;
  height: 120px;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #4a6cf7;
  box-shadow: 
    0 8px 25px rgba(74, 108, 247, 0.4),
    0 0 0 2px rgba(74, 108, 247, 0.2);
}

.user-name {
  text-align: center;
}

.user-name h3 {
  font-size: 1.5rem;
  margin: 0;
  color: #e0e0e0;
}

.user-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.95rem;
  color: #aaa;
}

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.status-dot.online {
  background-color: #4CAF50;
}

.status-dot.offline {
  background-color: #9E9E9E;
}

.stats-section {
  display: flex;
  align-items: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}

.stat-item {
  background: rgba(74, 108, 247, 0.1);
  border: 1px solid rgba(74, 108, 247, 0.2);
  border-radius: 12px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.stat-item:hover {
  background: rgba(74, 108, 247, 0.2);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(74, 108, 247, 0.3);
  border-color: rgba(74, 108, 247, 0.4);
}

.stat-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #4a6cf7 0%, #8b5cf6 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  box-shadow: 0 4px 15px rgba(74, 108, 247, 0.4);
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 1.4rem;
  font-weight: 600;
  color: #e0e0e0;
}

.stat-label {
  font-size: 0.9rem;
  color: #aaa;
  margin-top: 4px;
}

/* 安全设置卡片 */
.security-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 15px 0;
}

.security-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #4a6cf7 0%, #8b5cf6 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  color: white;
  font-size: 1.8rem;
  box-shadow: 0 8px 25px rgba(74, 108, 247, 0.4);
}

.security-info {
  margin-bottom: 20px;
}

.security-info h3 {
  font-size: 1.2rem;
  color: #e0e0e0;
  margin-bottom: 8px;
}

.security-info p {
  color: #aaa;
  font-size: 0.9rem;
}

.change-password-btn {
  background: linear-gradient(135deg, #4a6cf7 0%, #8b5cf6 100%);
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 25px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(74, 108, 247, 0.3);
}

.change-password-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(74, 108, 247, 0.5);
}

.password-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-header {
  text-align: center;
  margin-bottom: 15px;
}

.form-header h3 {
  font-size: 1.2rem;
  color: #e0e0e0;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.form-header p {
  color: #aaa;
  font-size: 0.9rem;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;

}

.form-item label {
  font-weight: 600;
  color: #e0e0e0;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-input {
  padding: 10px 15px;
  border: 2px solid rgba(74, 108, 247, 0.3);
  background: rgba(30, 30, 50, 0.8);
  color: #e0e0e0;
  border-radius: 8px;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.form-input:focus {
  outline: none;
  border-color: #4a6cf7;
  box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.2);
  background: rgba(30, 30, 50, 0.9);
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 15px;
}

.submit-btn {
  background: linear-gradient(135deg, #4a6cf7 0%, #8b5cf6 100%);
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(74, 108, 247, 0.3);
}

.submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(74, 108, 247, 0.5);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cancel-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #aaa;
  border: 2px solid rgba(255, 255, 255, 0.2);
  padding: 10px 25px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.cancel-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #e0e0e0;
  border-color: rgba(255, 255, 255, 0.3);
}

/* 应用设置卡片 */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.setting-card {
  display: flex;
  padding: 15px;
  background: rgba(74, 108, 247, 0.1);
  border: 1px solid rgba(74, 108, 247, 0.2);
  border-radius: 12px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.setting-card:hover {
  background: rgba(74, 108, 247, 0.2);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(74, 108, 247, 0.3);
  border-color: rgba(74, 108, 247, 0.4);
}

.setting-icon {
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #4a6cf7 0%, #8b5cf6 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.3rem;
  margin-right: 15px;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(74, 108, 247, 0.4);
}

.setting-content {
  flex: 1;
}

.setting-content h3 {
  font-size: 1rem;
  color: #e0e0e0;
  margin-bottom: 8px;
}

.setting-select {
  padding: 8px 12px;
  border: 2px solid rgba(74, 108, 247, 0.3);
  background: rgba(30, 30, 50, 0.8);
  color: #e0e0e0;
  border-radius: 8px;
  font-size: 0.9rem;
  width: 100%;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.setting-select:focus {
  outline: none;
  border-color: #4a6cf7;
  box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.2);
}

.toggle-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 22px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 22px;
  transition: 0.3s;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.3s;
}

input:checked+.toggle-slider {
  background-color: #4a6cf7;
}

input:checked+.toggle-slider:before {
  transform: translateX(23px);
}

.toggle-label {
  font-size: 0.9rem;
  color: #aaa;
}

.volume-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
  outline: none;
  margin: 8px 0;
}

.volume-slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4a6cf7;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(74, 108, 247, 0.4);
}

.volume-value {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  color: #aaa;
}

/* 加载状态 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.loading-spinner {
  text-align: center;
  color: #4a6cf7;
}

.loading-spinner i {
  font-size: 3rem;
  margin-bottom: 15px;
}

.loading-spinner p {
  font-size: 1.2rem;
  font-weight: 600;
  color: #e0e0e0;
}

/* 退出登录弹窗 */
.logout-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(8px);
}

.logout-modal {
  background: rgba(30, 30, 50, 0.95);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(74, 108, 247, 0.3);
  border-radius: 20px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(74, 108, 247, 0.2);
  max-width: 400px;
  width: 90%;
  overflow: hidden;
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.logout-modal-header {
  background: linear-gradient(135deg, #4a6cf7 0%, #8b5cf6 100%);
  padding: 20px;
  text-align: center;
  color: white;
}

.logout-icon {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  font-size: 1.8rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.logout-modal-header h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
}

.logout-modal-body {
  padding: 25px;
  text-align: center;
  color: #e0e0e0;
}

.logout-modal-body p {
  margin: 0 0 10px 0;
  font-size: 1.1rem;
  line-height: 1.5;
}

.logout-hint {
  font-size: 0.9rem !important;
  color: #aaa !important;
  margin-top: 8px !important;
}

.logout-modal-actions {
  padding: 0 25px 25px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.confirm-logout-btn {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 25px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.confirm-logout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.5);
}

.cancel-logout-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
  border: 2px solid rgba(255, 255, 255, 0.2);
  padding: 12px 25px;
  border-radius: 25px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.cancel-logout-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* 头像选择器样式 */
.avatar-selector-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 2rem;
  backdrop-filter: blur(10px);
}

.avatar-selector {
  width: 100%;
  max-width: 500px;
  background: rgba(30, 30, 50, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(74, 108, 247, 0.3);
  border-radius: 20px;
  padding: 2rem;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(74, 108, 247, 0.2);
}

.selector-header h3 {
  color: #e0e0e0;
  margin: 0;
  font-size: 1.5rem;
}

.close-selector-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #e0e0e0;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-selector-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  justify-items: center;
  margin-bottom: 1.5rem;
}

.avatar-option {
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.avatar-frame {
  position: relative;
  width: 80px;
  height: 80px;
  border: 2px solid rgba(74, 108, 247, 0.3);
  border-radius: 50%;
  overflow: hidden;
  transition: all 0.3s ease;
  background: rgba(30, 30, 50, 0.8);
}

.avatar-option:hover .avatar-frame {
  border-color: rgba(74, 108, 247, 0.6);
  transform: scale(1.05);
  box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.2);
}

.avatar-option.selected .avatar-frame {
  border-color: #4a6cf7;
  background: rgba(74, 108, 247, 0.1);
  box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.3);
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(74, 108, 247, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.avatar-option.selected .avatar-overlay {
  opacity: 1;
}

.check-icon {
  width: 24px;
  height: 24px;
  color: #fff;
}

.selector-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(74, 108, 247, 0.2);
}

.confirm-btn {
  background: linear-gradient(135deg, #4a6cf7 0%, #8b5cf6 100%);
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.confirm-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(74, 108, 247, 0.4);
}

.confirm-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 模态框过渡动画 */
.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: all 0.3s ease;
}

.modal-fade-enter-from,
.modal-fade-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-content {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .header-content {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .header-left {
    flex-direction: column;
    gap: 10px;
  }

  .page-title {
    font-size: 1.8rem;
  }

  .profile-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .card-header h2 {
    font-size: 1.2rem;
  }

  .avatar-selector {
    padding: 1.5rem;
  }
  
  .avatar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .avatar-frame {
    width: 70px;
    height: 70px;
  }
}

@media (max-width: 480px) {
  .avatar-selector {
    padding: 1rem;
  }
  
  .avatar-frame {
    width: 60px;
    height: 60px;
  }
  
  .selector-header h3 {
    font-size: 1.2rem;
  }
}

/* 移除原有深色主题样式，因为现在默认就是暗色调 */
</style>